<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sudo Slider | All the effects</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <link rel="STYLESHEET" type="text/css" href="../css/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var sudoSlider = $("#slider").sudoSlider({
                effect: "slide",
                prevNext: true,
                controlsFade: false,
                continuous: true
            });
            var slides = $("#slider").children().children();
            var container = $("#effectLinksHolder");
            var count = 0;
            $.each($.fn.sudoSlider.effects, function (effectName, effect) {
                count++;
                container.append($("<a> " + effectName + " </a> <span>| </span>").click(function () {
                    slides.attr("data-effect", effectName);
                    sudoSlider.stopAnimation();
                    sudoSlider.goToSlide("next");
                }));
            });
            $("#effectCounter").text(count);
        });
    </script>




</head>
<body>
<div id="container">
    <h1>Sudo Slider jQuery Plugin - All the <span id="effectCounter"></span> effects</h1>
    <div style="position:relative;">
        <div id="slider">
            <img src="../images/01.jpg" alt="image description"/>
            <img src="../images/02.jpg" alt="image description"/>
            <img src="../images/03.jpg" alt="image description"/>
            <img src="../images/04.jpg" alt="image description"/>
            <img src="../images/05.jpg" alt="image description"/>
        </div>
        <div id="effectLinksHolder"></div>
    </div>
</div>
<script type="text/javascript">
    /* Google Analytics, please remove
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-20484420-1']);
     _gaq.push(['_trackPageview']);

     (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
     /* */
</script>
</body>
</html>